<template>
  <div>
    <header-bar
      :date-options="dateOptions"
      :date-type="5"
      title="3D模型下载整体概况"
      @date-change="changeOverview"
    />

    <div u="w-full h-100px flex">
      <div
        u="font-bold leading-100px flex-1 max-w-300px pl-4"
      >
        商品概况：
      </div>
      <div u="flex-1 max-w-300px">
        <div>
          被下载商品数
          <el-popover
            content="统计时间内，被下载的商品数量"
            placement="top"
          >
            <template #reference>
              <el-icon>
                <QuestionFilled u-cursor-pointer />
              </el-icon>
            </template>
          </el-popover>
        </div>
        <div u="font-bold mt-4">
          {{ overView.data.productDate }}
        </div>
        <Item
          u-mt-4
          :date-type="overviewType"
          :rate="overView.rate.productDateRate"
        />
        <div />
      </div>

      <div>
        <div>
          模型下载总次数
          <el-popover
            content="统计时间内，下载的模型数量"
            placement="top"
          >
            <template #reference>
              <el-icon>
                <QuestionFilled u-cursor-pointer />
              </el-icon>
            </template>
          </el-popover>
        </div>
        <div u="font-bold mt-4">
          {{ overView.data.modelDate }}
        </div>
        <Item
          u-mt-4
          :date-type="overviewType"
          :rate="overView.rate.modelDateRate"
        />
        <div />
      </div>
    </div>

    <header-bar
      :date-options="dateOptions"
      :date-type="5"
      title="3D模型下载趋势分析"
      @date-change="changeAnalysis"
    />
    <div
      ref="domRef"
      u="w-fulll h-300px"
    />
  </div>
</template>

<script setup>
import { QuestionFilled } from '@element-plus/icons-vue'
import headerBar from '../prod-profile/components/head-bar.vue'
import Item from './item.vue'
import * as echarts from 'echarts'

const analysisData = ref([])
const supplierMap = {
  cadenas: {
    color: 'blue',
    name: 'Cadenas'
  },
  be: {
    color: 'green',
    name: '大工程师'
  },
  xindi: {
    color: 'yellow',
    name: '新迪'
  },
  huatian: {
    color: 'red',
    name: '华天'
  }
}

const dateOptions = [
  {
    label: $t('dataAnalysis.todayRealTime'),
    value: 4
  },
  {
    label: $t('dataAnalysis.nearly7'),
    value: 5
  },
  {
    label: $t('dataAnalysis.nearly30'),
    value: 6
  },
  {
    label: $t('dataAnalysis.naturalDay'),
    value: 1
  },
  {
    label: $t('dataAnalysis.naturalMonth'),
    value: 3
  }
]

const changeOverview = (val) => {
  const { timeType, dateRange } = val
  const [startTime, endTime] = dateRange
  getOverview(timeType, startTime, endTime)
}

const changeAnalysis = (val) => {
  const { timeType, dateRange } = val
  const [startTime, endTime] = dateRange
  getAnalysis(timeType, startTime, endTime)
}

const overView = ref({
  data: {},
  lastData: {},
  rate: {}
})

const overviewType = ref(5)

const getOverview = async (dateType, startTime, endTime) => {
  overviewType.value = dateType
  console.log('%c Line:142 🥛 dateType', 'color:#5B6910', dateType)
  const res = await http({
    url: http.adornUrl('/platform/prodAnalysis/getDownload3DModelSurvey'),
    params: http.adornParams({
      dateType,
      startTime,
      endTime
    })
  })
  overView.value = res.data
  console.log('%c Line:114 🥛 res', 'color:#CB9C1A', res.data)
}

const getAnalysis = async (dateType, startTime, endTime) => {
  const res = await http({
    url: http.adornUrl('/platform/prodAnalysis/getDownload3DModelStat'),
    params: http.adornParams({
      dateType,
      startTime,
      endTime
    })
  })
  analysisData.value = res.data
  await nextTick()
  draw()
}

let chart
const domRef = ref()
const draw = () => {
  if (!chart) {
    chart = echarts.init(domRef.value)
  }
  const xAxisData = []
  const legendData = []
  const seriesData = []
  let appendLegend = false
  analysisData.value.forEach((item, index) => {
    xAxisData.push(item.currentDay)
    Object.keys(supplierMap).forEach((key, i) => {
      if (!appendLegend) {
        legendData.push(supplierMap[key].name)
      }
      if (index == 0) {
        seriesData.push({
          type: 'line',
          smooth: true,
          name: supplierMap[key].name,
          data: [item[key]]
        })
      } else {
        seriesData[i].data.push(item[key])
      }
    })
    appendLegend = true
  })
  const options = {
    tooltip: {
      trigger: 'axis',
      backgroundColor: '#fff',
      padding: 8,
      textStyle: {
        // 提示框浮层的文本样式。
        fontSize: '12px',
        fontWeight: 400,
        color: '#33333',
        opacity: 1,
        lineHeight: '20px'
      },
      extraCssText: 'box-shadow:0px 1px 11px rgba(213, 220, 226, 0.73);'
    },
    legend: {
      // 图例配置
      data: legendData,
      selectedMode: false, // 关闭图例选择
      itemHeight: 8, // 图例标记的图形宽度。
      itemWidth: 18, // 图例标记的图形高度。
      icon: 'roundRect', // 图例项的 icon。
      itemGap: 40, // 图例每项之间的间隔
      textStyle: {
        // 图例的公用文本样式。
        color: '#999999',
        size: 12,
        padding: [0, 0, 0, 10]
      }
    },
    grid: {
      left: '3%',
      right: '4%',
      bottom: '3%',
      containLabel: true
    },
    xAxis: {
      type: 'category',
      data: xAxisData
    },
    yAxis: {
      type: 'value'
    },
    series: seriesData
  }
  chart.setOption(options)
}

const resize = () => {
  chart?.resize()
}

onMounted(() => {
  window.addEventListener('resize', resize)
})

onBeforeUnmount(() => {
  window.removeEventListener('resize', resize)
})
</script>
